<template>
  <view class="enterpriseMember">
    <block v-if="!loading">
      <view style="height: 80vh;" v-if="memberList.length <= 0 && applyList.length <= 0">
        <u-empty mode="data" text="暂无数据"></u-empty>
      </view>
      <block v-else>
        <!-- 成员列表 -->
        <view class="member-list">
          <view class="cell" v-for="(item, index) in memberList" :key="index" :class="{'manage': item.role}" @click="onJumpMemberDetails(item, true)">
            <view class="userinfo">
              <image class="avatar" :src="item.headportrait"></image>
              <text class="nickname">{{item.truename}}</text>
              <text class="tag" v-if="item.role">超级管理员</text>
            </view>
          </view>
        </view>
        
        <!-- 申请列表 -->
        <view class="apply-list-box" v-if="applyList.length > 0">
          <view class="title"><text>成员申请</text></view>
          <view class="apply-list">
            <view class="cell" v-for="(item, index) in applyList" :key="index" @click="onJumpMemberDetails(item, false)">
              <view class="userinfo">
                <image class="avatar" :src="item.headportrait"></image>
                <view class="info">
                  <text class="nickname">{{item.truename}}</text>
                  <text class="invitees">邀请人：{{item.pname}}</text>
                </view>
              </view>
              <view class="menu-btn-box">
                <view class="flex">
                  <view class="btn" @click.stop="onClickApply(item, index,false)"><text>拒绝</text></view>
                  <view class="btn active" @click.stop="onClickApply(item, index, true)"><text>通过</text></view>
                </view>
                <view class="time">{{item.addtime | formateTime}}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 底部邀请同事按钮 -->
      <view class="footer" v-if="userinfo.isService">
        <view class="btn-box">
          <view class="btn flex flex-ai-c flex-jc-c" @click="onClickInviteColleague">
            <u-icon name="plus-circle" size="40rpx" color="#333"></u-icon>
            <text class="text">邀请同事</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import {share} from '@/utils/common-api.js' // 导入分享方法
const dayjs = require('@/utils/dayjs.js')
export default {
  data() {
    return {
      userinfo: null, // 用户信息
      memberList: [], // 成员列表
      applyList: [] ,// 申请列表
      loading: true // 页面加载状态
    }
  },
  onLoad() {
    // 获取页面数据
    this.getPageData()
  },
  onShow() {
    this.getPageData()
  },
  filters: {
    formateTime(data) {
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    // 邀请同事
    onClickInviteColleague() {
      uni.navigateTo({
        url: `/pages_userModule/inviteColleague/inviteColleague?inviteCode=${this.userinfo.invitecode}&name=${encodeURIComponent(this.userinfo.nickname)}`
      })
    }, 
    // 获取页面数据
    getPageData() {
      this.loading = true
      uni.showLoading({
        title: '加载中'
      })
      let getUserinfo = this.$api.user.GetUserInfomation() 
      let getMyInfo = this.$api.me.getMyInfo()
      
      // 企业成员列表
      let getGetAccountMemberList = this.$api.user.GetAccountMemberList({
        pageIndex: 1,
        pageSize: 100
      })
      
      // 企业成员申请列表
      let getGetAccountMemberApplyEntityList = this.$api.user.GetAccountMemberApplyEntityList({
        pageIndex: 1,
        pageSize: 100
      })
      
      Promise.all([getUserinfo, getMyInfo, getGetAccountMemberList, getGetAccountMemberApplyEntityList]).then((data) => {
        let user = data[0].data
        user.isService = data[1].data.isService
        this.memberList = data[2].data.list
        this.applyList = data[3].data.list
        this.userinfo = user
        uni.hideLoading()
        this.loading = false
      }).catch(err => {
        uni.hideLoading()
        this.loading = false
      })
    },
    // 点击通过拒绝
    async onClickApply(item, index, type) {
      uni.showLoading({
        title: '加载中'
      })
      try{
        let params = {
          id: item.id,
          sid: item.sid
        }
        let res = type ? await this.$api.user.AgreeAccountApply(params) : await this.$api.user.RefuseAccountApply(params)
        if(res.code === 200) {
          if(type) {
            this.memberList.push(item)
          }
          this.applyList.splice(index, 1) 
        }
        uni.showToast({
          icon: 'none',
          title: res.msg
        })
        uni.hideLoading()
      }catch(e){
        uni.hideLoading()
      }
    },
    // 跳转成员详情
    onJumpMemberDetails(data, type) {
      let params = ''
      if(type && this.userinfo.isService) {
        params = `&type=group`
      }
      uni.navigateTo({
        url: `/pages_userModule/memberDetails/memberDetails?sid=${data.sid}&id=${data.id}${params}`
      })
    }
  },
  onUnload() {
    uni.hideLoading()
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.enterpriseMember{
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 120rpx;  
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  .member-list{
    margin: 24rpx;
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
    border-radius: 10rpx;
    overflow: hidden;
    .cell{
      padding: 0 16rpx;
      .userinfo{
        display: flex;
        align-items: center;
        padding: 24rpx 0;
        border-top: 2rpx solid #F6F6F6;
        .avatar{
          width: 70rpx;
          height: 70rpx;
          border-radius: 70rpx;
        }
        .nickname{
          margin-left: 24rpx;
          font-size: 28rpx;
          color: #333;
        }
        .tag{
          display: block;
          height: 26rpx;
          line-height: 26rpx;
          font-size: 20rpx;
          background-color: #FBD220;
          padding: 0 10rpx;
          border-radius: 26rpx;
          margin-left: 24rpx;
        }
      }
      &.manage{
        background-color: #FFF0CD;
        .userinfo{
          border-top: none;
        }
      }
      &:first-child {
        .userinfo{
          border-top: none;
        }
      }
    }
  }
  
  .apply-list-box{
    padding: 0 24rpx;
    margin-top: 30rpx;
    .title{
      font-size: 24rpx;
      color: #666;
    }
    .apply-list{
      margin: 24rpx 0;
      background-color: #fff;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
      border-radius: 10rpx;
      overflow: hidden;
      .cell{
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16rpx;
        border-top: 2rpx solid #F6F6F6;
        .userinfo{
          display: flex;
          align-items: center;
          .avatar{
            width: 70rpx;
            height: 70rpx;
            border-radius: 70rpx;
          }
          .info{
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 24rpx;
            .nickname{
              font-size: 28rpx;
              color: #333;
            }
            .invitees{
              font-size: 24rpx;
              color: #999;
              margin-top: 6rpx;
            }
          }
        }
        .menu-btn-box{
          padding-right: 10rpx;
          .btn{
            width: 124rpx;
            height: 60rpx;
            background-color: #333;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #fff;
          }
          .active{
            background-color: #FBD220;
            color: #333;
            margin-left: 32rpx;
          }
          .time{
            text-align: center;
            font-size: 22rpx;
            color: #999;
            margin-top: 4rpx;
          }
        }
        &:first-child {
          border-top: none;
        }
      }
    }
  }
  
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
    .btn-box{
      padding: 16rpx 24rpx;
      .btn{
        height: 88rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 44rpx;
        .text{
          font-size: 32rpx;
          color: #333;
          margin-left: 16rpx;
        }
      }
    }
  }
}
</style>
